<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'
import { ref } from 'vue'

import {getUserInfo,updateUserService,selectuserService } from '@/api/user.js';
import { onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

import { ElMessage } from 'element-plus';

const userList = ref([]) 

//控制弹窗
const dialogVisible = ref(false)

//定义变量，来控制弹窗标题的展示
const title = ref('')

const editForm = ref({}) // 新建单独的编辑表单对象

const showDialog = (row) => {
    dialogVisible.value = true
    title.value = '修改用户'
    editForm.value = JSON.parse(JSON.stringify(row)) // 深拷贝当前行数据
}

const updateUser = async() => {
    //调用接口
    let result = await updateUserService(editForm.value)
    ElMessage.success(result.message || "修改成功")
    //刷新页面，再次调用 查询所有用户信息的函数
    UserInfo()
    //让弹窗消失掉
    dialogVisible.value = false
}


//添加表单校验
const rules = {
    userAccount: [
        { required: true, message: '请输入账户名', trigger: 'blur' },
    ],
    userPassword: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    userAge:[
        { required: true, message: '请输入年龄', trigger: 'blur' },
    ] ,
    userSex: [
        { required: true, message: '请输入性别', trigger: 'blur' },
    ],
    userPhone: [
        { required: true, message: '请输入电话', trigger: 'blur' },
    ],
    userEmail:[
        { required: true, message: '请输入邮箱', trigger: 'blur' },
    ]
}


// //声明一个异步函数

const UserInfo = async() => {
    let userresult = await selectuserService();
    userList.value = userresult.data; // 直接赋值数组
}

// 添加路由变化监听
onMounted(() => {
    UserInfo()
})

// 监听路由变化
watch(
    () => route.path,
    (newPath) => {
        if (newPath === '/user/userinfo') {
            UserInfo()
            console.log('路由变化触发数据刷新') // 调试用
        }
    }
)

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>用户信息</span>
            </div>
        </template>
        <el-table :data="userList" style="width: 100%">
            <el-table-column label="账户" prop="userAccount"></el-table-column>
            <el-table-column label="密码" prop="userPassword"></el-table-column>
            <el-table-column label="名字" prop="userName"></el-table-column>
            <el-table-column label="年龄" prop="userAge"></el-table-column>
            <el-table-column label="性别" prop="userSex"></el-table-column>
            <el-table-column label="联系电话" prop="userPhone"></el-table-column>
            <el-table-column label="邮箱" prop="userEmail"></el-table-column>
            <el-table-column label="修改信息" width="150px">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
                </template>  
            </el-table-column>
        </el-table>

         <!-- 添加弹窗 -->
        <el-dialog v-model="dialogVisible" :title="title" width="30%">
                <el-form :model="editForm" :rules="rules" label-width="100px" style="padding-right: 30px">
                    <el-form-item label="账户" prop="userAccount" v-show="title!='修改信息'">
                        <el-input v-model="editForm.userAccount" minlength="1" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="账户密码" prop="userPassword" >
                        <el-input v-model="editForm.userPassword" minlength="1" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="名字" prop="userName">
                        <el-input v-model="editForm.userName" minlength="1" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="userAge">
                        <el-input v-model.number="editForm.userAge" minlength="1" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="userSex">
                        <el-input v-model="editForm.userSex" minlength="1" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="userPhone">
                        <el-input v-model="editForm.userPhone" minlength="1" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="userEmail">
                        <el-input v-model="editForm.userEmail" minlength="1" maxlength="10"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="updateUser">确认</el-button>
                    </span>
                </template>
            </el-dialog>

  </el-card>
</template>


<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>